<template>
	<view>
		<!-- 导航栏 -->
		<view class="nav">
			<view class="list" v-bind:class="{toogle:isActive}" @click="toogle()" >
				<view class="nav-list">活动列表</view>
			</view>
			<view class="participate" v-bind:class="{toogle:!isActive}" @click="participate()">
				<view class="nav-list">我要参与</view>
			</view>
		</view>
		<view class="directory"  ref="a">
			<!-- 第1个活动 -->
			<view class="row" @click="apply(list.id)" v-for="(list,index) in  lists" :key="list.id">
				<!-- 活动标题 -->
				<view class="header">{{list.title}}</view>
				<!-- 活动图 -->
				<view class="diagram">
					<image class="active_diagram" :src="list.img"></image>
				</view>
				<!-- 报名好处 -->
				<view class="apply_bg">
					<view class="apply">报名可享</view>
					<view class="description">{{list.text}}</view>
					<!-- 1 -->
					<view class="timing_l" v-if="list.day==0">
						<text>剩</text>
						<text class="remaining">{{list.days}}</text>
						<text>天</text>
					</view>
					<!-- 2 -->
					<view class="timing_l" v-else-if="list.day==1">
						<text>剩</text>
						<text class="remaining">{{list.hours}}</text>
						<text>时</text>
						<text class="remaining">{{list.minutes}}</text>
						<text>分</text>
					</view>
					<!-- 3 -->
					<view class="timing_l" v-else-if="list.day==2">
						<text>剩</text>
						<text class="remaining">{{list.minutes}}</text>
						<text>分</text>
						<text class="remaining">{{list.seconds}}</text>
						<text>秒</text>
					</view>
					<!-- 4 -->
					<view class="timing_l" v-else="list.day==3">
						<text>活动已结束</text>
					</view>
				</view>
				<!-- 报名人数 -->
				<view class="give_money">
					<view class="partake">
						<text class="price">￥{{list.money}}</text>
						<text class="number">已报名{{list.people}}人</text>
					</view>
					<view class="apply_btn" v-if="list.option=='立即报名'">{{list.button}}</view>
					<view class="apply_btn" v-else-if="list.option=='参与众筹'">{{list.crowdfunding}}</view>
					<view class="ban_btn" v-else="list.option=='报名截止'">{{list.cutoff}}</view>
				</view>
			</view>
			<!-- 第二个活动 -->
			
		</view>
		<!-- 广告 -->
		<view :class="{AD:isAD,activeAD:isActiveAd}">
			<image class="zanboon" src="../../static/zanboon.png"></image>
		</view>
	</view>
</template>

<script>
	// import store from 'store';
	// import { login, events_list } from '@/api/huodongliebiao/huodongliebiao.js';
	// var countDownDate1=new Date("2019-09-27 15:16:20").getTime();
	// var countDownDate2=new Date("2019-09-26 18:41:00").getTime();
	export default {
		data() {
			return {
				lists:[
					{
						id:0,
						title:'我是活动名字来来来分是奥恩啊瓦fewl的二十一',
						img:'../../static/huodongliebiao/activity_diagram.png',
						award:'',
						text:'我是活动报名的好处，报名即可获得优惠券500元啥的总共不超30字',
						btn:true,
						day:3,//活动结束
						days:'00',
						hours:'00',
						minutes:'00',
						seconds:'00',
						money:'90.00',
						people:'98',
						option:'参与众筹',//情况
						button:'立即报名',
						cutoff:'报名截止',
						crowdfunding:'参与众筹',
						time:'2019-10-30 17:2:30',//接收活动的日期
						timer: null,
					},
					{
						id:1,
						title:'我是活动名字来来来分是奥恩啊瓦fewl的二十一',
						img:'../../static/huodongliebiao/activity_diagram.png',
						award:'',
						text:'我是活动报名的好处，报名即可获得优惠券500元啥的总共不超30字',
						btn:true,
						day:3,//活动结束
						days:'00',
						hours:'00',
						minutes:'00',
						seconds:'00',
						money:'50.00',
						people:'63',
						option:'参与众筹',//情况
						button:'立即报名',
						cutoff:'报名截止',
						crowdfunding:'参与众筹',
						time:'2019-10-30 17:12:30',//接收活动的日期
						timer: null,
					}
				],
			isActive:true,
			isAD:true,
			isActiveAd:false,
			}
		},
		
		onLoad() {
			let that = this;
			// that.Login()
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res.screenHeight,'手机的高度');
					that.Height=res.screenHeight;
				}
			});
		},
		onReady(){
			let that=this;
			// console.log(that.$refs.a,'654');
			that.row=that.$refs.a.$el.clientHeight;
			that.quantity();
		},
		onShow() {
			this.timel();
			//数组
			// let arr = [1,2];
			// for(var k in arr ){
			// 	this.timel(arr,k);
			// }
		},
		methods: {
			async Login(){
				await login();
				await events_list().then(res => {
					console.log(res,'res');
				});
			},
			toogle:function(){
				console.log('活动详情');
				this.isActive=true;
				// uni.navigateTo({
				// 	url: '../../pages/huodongliebiao/huodongliebiao?id=0'
				// });
			},
			participate:function(){
				// this.isActive=false;
				console.log('我要参与');
				uni.navigateTo({
					url: '../../pages/woyaocanyu/woyaocanyu?id=1'
				});
			},
			timel(){
				let that=this;
				//设置倒计时的日期
				//获取设置的时间 如：2019-3-28 14:00:00  ios系统得加正则.replace(/\-/g, '/');
				for(let i=0; i<that.lists.length;i++){
					// console.log(i,'i');
				// var countDownDate=new Date("2019-10-30 22:48:30").getTime();
					// console.log(countDownDate,'222');
					//每1秒钟更新一次计数
					//var countDownDate=new Date(that.lists[i].time.replace(/\-/g,'/')).getTime();
					that.lists[i].timer = setInterval(function(){
					var countDownDate=new Date(that.lists[i].time.replace(/\-/g,'/')).getTime();
						//获取今天的日期和时间
						console.log(countDownDate,'11111');
						var now = new Date().getTime();
						// console.log(now,'now');
						//找到现在和倒计时日期之间的距离
						var distance = countDownDate-now;
						//时间计算的天，小时，分钟和秒
						var days = Math.floor(distance / (1000 * 60 * 60 * 24));
						var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
						var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
						var seconds = Math.floor((distance % (1000 * 60)) / 1000);
						
						that.lists[i].days=days;
						that.lists[i].hours = hours;
						that.lists[i].minutes=minutes;
						that.lists[i].seconds=seconds;
						if(distance<=0){
							that.lists[i].day=3;
							that.lists[i].option='活动结束';
							clearInterval(that.lists[i].timer);
						}else if(days > 1){
							that.lists[i].day=0;
						}else if(hours >= 1 && days <= 0){
							that.lists[i].day=1;
						}else if(hours <= 0){
							that.lists[i].day=2;
						}
						console.log('a')
					},1000);
				}
			},
			apply:function(e){
				let that=this;
				//在起始页面跳转到test.vue页面并传递参数
				console.log(e,'@click="apply()"');
				uni.navigateTo({
					url: '../../pages/huodongxiangqing/huodongxiangqing?id='+e,
				});
			},
			quantity:function(){
				let that=this;
				//let Height=that.Height-that.row;//手机高度减去内容高度
				let Height=that.Height-70;
				console.log(Height,'369');
				if(Height>that.row){
					that.isAD=true;
					that.isActiveAd=false;
				}else if(Height<that.row){
					that.isAD=false;
					that.isActiveAd=true;
				}
			}
		}
	}
</script>

<style>
	page{
		background:#F3F2F7;
	}
	.nav{
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		height: 88upx;
		border-bottom:1upx solid #CCCCCC;
		font-size:28upx;
		background-color: #FFFFFF;
	}
	.list{
		height: 84upx;
		width: 160upx;
		background: #FFFFFF;
		color: #666666;
		margin-right:64upx;
	}
	.participate{
		background: #FFFFFF;
		height: 84upx;
		width: 160upx;
        color: #666666;
		margin-left:64upx;
	}
	.toogle{
		color:#D53D34;
		border-bottom:6upx solid #D53D34;	
	}
	.nav-list{
		padding:22upx 22upx 20upx 22upx;
		font-size:28upx;
	}
	.row{
		background: #FFFFFF;
		margin-bottom: 30upx;
	}
	.header{
		font-size: 32upx;
		padding:24upx 30upx 16upx 30upx ;
	}
	.diagram{
		height: 408upx;
		width: 750upx;
		/* padding-top: 10upx; */
	}
	.active_diagram{
		height: 100%;
		width: 750upx;
	}
	.apply_bg{
		display: flex;
		align-items: center;
		height: 90upx;
		width: 750upx;
		background-image: url('~@/static/huodongliebiao/benefit.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	.apply{
		width: 56upx;
		font-size: 28upx;
		margin-left:30upx;
		margin-right: 26upx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.description{
	    width: 380upx;
	    font-size: 24upx;
	    color: #FFFFFF;
		/* margin-left:26upx; */
	}
	.timing_l{
		display: flex;
		align-items: center;
		align-content: ;
		margin-left: auto;
		margin-right: 30upx;
		color: #FFFFFF;
		font-size: 24upx;
		/* border: 1upx solid #4CD964; */
	}
	.remaining{
		font-size: 40upx;
	    background-color: #FFFFFF;
		border-radius:4upx;
		color: #FF615D;
		padding: 0upx 6upx;
		margin: 0upx 8upx;
		
	}
	.give_money{
		display: flex;
		height: 130upx;
		/* border: 1upx solid #4CD964; */
	}
	.partake{
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		height: 130upx;
		margin-left: 30upx;
		/* border: 1upx solid #007AFF; */
	}
	.price{
		position: relative;
		color: #FE0400;
		font-size: 40upx;
		left:-10upx;
	}
	.number{
		font-size: 22upx;
		color:#666666;
	}
	.apply_btn{
		height: 54upx;
		width: 166upx;
		margin-left: auto;
		margin-top: 32upx;
		margin-right:30upx;
		padding-top:12upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30upx;
		background-color: #D53D34;
		border-radius: 4upx;
	}
	.ban_btn{
		height: 54upx;
		width: 166upx;
		margin-left: auto;
		margin-top: 32upx;
		margin-right:30upx;
		padding-top:12upx;
		text-align: center;
		color: #AAAAAA;
		font-size: 30upx;
		background-color: #E8E8E8;
		border-radius: 4upx;
	}
	.AD{
			position: absolute;
			margin-bottom: 20upx;
			bottom: 0;
			left: 267upx;
			
		}
	.activeAD{
		position: relative;
		display: flex;
		justify-content: center;
		margin-top:34upx;
		margin-bottom: 20upx;
	}
	.zanboon{
		height: 28upx;
		width: 216upx;
		
	}
</style>
